<script setup>

import MyList from "../../components/MyList.vue";
//import {MINIO_HOST} from "../../const/index.js";
import {dateFormat, genderFormat} from "../../util/index.js";
import MyNav from "../../components/MyNav.vue";

/* ==================== 员工详情 ==================== */
// 当前登录的员工信息
const loginEmp = JSON.parse(sessionStorage.getItem('loginEmp'));

// 员工详情项-左侧
let empInfoItemsLeft = [
  {'label': '员工编号', 'value': loginEmp['eno'], 'span': 2},
  {'label': '真实姓名', 'value': loginEmp['name']},
  {'label': '入职时间', 'value': loginEmp['hiredate'], 'format': dateFormat},
  {'label': '创建时间', 'value': loginEmp['created'], 'format': dateFormat},
  {'label': '修改时间', 'value': loginEmp['updated'], 'format': dateFormat},
];

// 员工详情项-右侧
let empInfoItemsRight = [
  {'label': '所属部门', 'value': loginEmp['dept'] ? loginEmp['dept']['name'] : '暂未分配部门'},
  {'label': '员工职位', 'value': loginEmp['job']},
  {'label': '员工性别', 'value': loginEmp['gender'], 'type': 'tag', 'format': genderFormat},
  {'label': '手机号码', 'value': loginEmp['phone']},
  {'label': '电子邮件', 'value': loginEmp['email']},
  {'label': '身份证号', 'value': loginEmp['idCard']},
  {'label': '紧急联系人', 'value': loginEmp['emergencyContactName']},
  {'label': '紧急联系电话', 'value': loginEmp['emergencyContactPhone']},
  {'label': '家庭住址', 'value': loginEmp['address'], 'type': 'card', 'span': 2},
  {'label': '员工描述', 'value': loginEmp['info'], 'type': 'card', 'span': 2},
];

function minio(src) {
  // return MINIO_HOST + '/avatar/' + src;
}

</script>

<template>

  <my-nav :items="[
    {'icon': 'House', 'label': 'DashBoard', 'url': '/DashBoard'},
    {'icon': 'View', 'label': '个人信息'},
  ]"/>

  <el-divider/>

  <div class="personal-body">
    <el-row :gutter="20">
      <el-col :span="7">
        <el-image :src="minio(loginEmp['avatar'])"></el-image>
        <el-divider/>
        <my-list :title="'当前员工：' + loginEmp['name']" :items="empInfoItemsLeft"/>
      </el-col>
      <el-col :span="17">
        <my-list title="当前员工详细信息" :items="empInfoItemsRight" :column="2"/>
      </el-col>
    </el-row>
  </div>

</template>

<style scoped lang="scss">
.personal-body {
  width: 90%;
  margin: 40px auto 0;
}
</style>